<template>
    <!-- 页面布局card通用组件 -->
    <PageCard>
      <el-collapse :value="['1', '2', '3']">
        <el-collapse-item name="1">
          <template slot="title">
            腾讯配置<svg-icon icon-class="TengXun"></svg-icon>
          </template>
          <TengXun :form.sync="paramsInfo"/>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            微信配置<svg-icon icon-class="WeiXin"></svg-icon>
          </template>
          <WeiXIn :form.sync="paramsInfo"/>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            恋信配置<svg-icon icon-class="ChatApp"></svg-icon>
          </template>
          <ChatApp :form.sync="paramsInfo"/>
        </el-collapse-item>
      </el-collapse>

      <!-- 底部工具栏 -->
      <div class="params-page-floor">
        <el-button type="primary" :disabled="!paramsChange" @click="submitForm">提交</el-button>
        <el-button type="default" :disabled="!paramsChange" @click="resetUpdate">重置</el-button>
      </div>
    </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import TengXun from './components/TengXun.vue'
import WeiXIn from './components/WeiXin.vue'
import ChatApp from './components/ChatApp.vue'

import { sysParams, editParams } from '@/api/params'

export default {
  name: 'ParamsPage',
  components: {
    PageCard,
    TengXun,
    WeiXIn,
    ChatApp
  },
  data() {
    return {
      paramsInfo: {
        id: null,
        txApiAppId: '',
        txApiSecretId: '',
        txApiSecretKey: '',
        wxMiniAppId: '',
        wxMiniAppSecret: '',
        chatApplyNumber: 50,
        chatApplyValid: 30
      },
      paramsChange: false,
      updateForm: {}
    }
  },
  created() {
    this.$nextTick(async ()=> {
      await this.loadSysParams()
    })
  },
  methods: {
    // 加载系统配置参数
    async loadSysParams() {
      const res = await sysParams()
      this.paramsInfo = res.data
      Object.keys(this.paramsInfo).forEach(item=> {
        this.$watch('paramsInfo.' + item, (newValue, oldValue) => {
          console.log(`Field name ${item} has been updated from ${oldValue} to ${newValue}`)
          this.paramsChange = true
          this.updateForm[item] = newValue
        });
      })
    },

    // 提交数据信息
    async submitForm() {
      if(!this.paramsInfo.id){
        this.$message.error('缺少数据ID')
        return
      }
      this.updateForm['id'] = this.paramsInfo.id
      this.$confirm('确定提交已修改的数据信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async ()=> {
        await editParams(this.updateForm)
        this.paramsChange = false
        this.$message.success('提交成功')
        await this.loadSysParams()
        this.paramsChange = false
      }).catch(()=> {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
      })
    },

    async resetUpdate() {
      this.$confirm('确定重置已修改的数据信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async ()=> {
        this.updateForm = {}
        await this.loadSysParams()
        this.paramsChange = false
        this.$message.success('重置成功')
      }).catch(()=> {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .page-card-container {

    ::v-deep .el-collapse {
      height: calc(100vh - 200px);
      font-weight: bold;

      .el-collapse-item{

        .el-collapse-item__header {
          font-weight: bold;
          font-size: 18px;
          font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
      }
    }

    .params-page-floor {
      width: 100%;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  }
</style>